<template>
<div>
	<el-form label-width="80px" style="margin-top:15px;">
		 <el-row>
			<el-col :span="16">
					<el-form-item label="商品名称">
							<el-input v-model="form.name"></el-input>
				  </el-form-item>
			</el-col>
			<el-col :span="4">
				   <div style="padding-top:5px;text-align:center;">
				    <el-checkbox label="精品" v-model="form.goodBrand"></el-checkbox>
						<el-checkbox label="新品" v-model="form.newGoods"></el-checkbox>
					 </div>	
			</el-col>
			<el-col :span="4">
				<el-form-item label="上架状态">
				   <el-select v-model="form.state" >
						<el-option label="上架" value="0"></el-option>
						<el-option label="下架" value="-1"></el-option>
					</el-select>
				</el-form-item>	
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">
					<el-form-item label="商家编码">
							<el-input v-model="form.shopCode"></el-input>
				  </el-form-item>
			</el-col>
			<el-col :span="4">
					<el-form-item label="价格">
							<el-input type="number" v-model="form.price" placeholder="单位:元"></el-input>
				  </el-form-item>
			</el-col>
			<el-col :span="4">
					<el-form-item label="原价">
							<el-input type="number" v-model="form.oldPrice" placeholder="单位:元"></el-input>
				  </el-form-item>
			</el-col>
			<el-col :span="4">
					<el-form-item label="重量">
							<el-input type="number" v-model="form.weight" placeholder="单位:kg"></el-input>
				  </el-form-item>
			</el-col>
			<el-col :span="4">
					<el-form-item label="库存">
							<el-input v-model="form.amount"></el-input>
				  </el-form-item>
			</el-col>
		</el-row>
		<el-form-item label="缩略图">
				<el-upload
					action="/"
					list-type="picture-card"
					:auto-upload="false"
					:file-list="fileList"
					:on-change="fileChange"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
		</el-form-item>
		<el-form-item label="商品详情">
				<quill-editor  style="height:250px;width:100%;margin-bottom:50px"
            v-model="form.detail" 
            ref="myQuillEditor" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
				<el-button type="primary" @click="send" style="margin-top:70px">立即提交</el-button>
		</el-form-item>
			
	</el-form>
</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogImageUrl: '',
				fileList:[],
        dialogVisible: false,
				form: {
					name: '',
					shopCode:'',
					price:'',
					oldPrice:'',
          weight:'',
					amount:'', 
					images:'',
					detail:'',
					state:"0",
					goodBrand: false,
					newGoods: false
				}
			}
		},
		computed:{
			 editor() {
            return this.$refs.myQuillEditor.quill;
        },
		},
		mounted(){
			if(this.$route.query.id){
				this.getDetail();
			}
		},
		methods: {
			onEditorReady(editor) { // 准备编辑器
			},
			onEditorBlur(){}, // 失去焦点事件
			onEditorFocus(){}, // 获得焦点事件
			onEditorChange(){}, // 内容改变事件
			saveHtml:function(event){
				alert(this.content);
			},
			getDetail(){
				let that=this;
				this.axios.get(
						"/goods/"+that.$route.query.id,
						{
							headers: {
								"Content-Type": "application/x-www-form-urlencoded",
								"domain": "taobao.tianyalei.com",
								"Authorization":sessionStorage.getItem('token')
							}
						}
					)
					.then(function(response) {
						if (response.data.code == 200) {
							that.form.name=response.data.data.name;
							that.form.shopCode=response.data.data.shopCode;
							that.form.price=response.data.data.price/100;
							that.form.oldPrice=response.data.data.oldPrice/100;
							that.form.weight=response.data.data.weight/1000;
							that.form.amount=response.data.data.amount;
							that.form.images=response.data.data.images;
							that.form.detail=response.data.data.detail;
							that.form.state=response.data.data.state.toString();
							that.form.goodBrand=response.data.data.goodBrand;
							that.form.newGoods=response.data.data.newGoods;
							if(that.form.images){
									var arry=that.form.images.split(',');
									for(var i=0;i<arry.length;i++){
											that.fileList.push({
												name:"1",
												url:arry[i]
											})
									}
							}
							
						} 
					});
			},
			fileChange(file, fileList) {
				let that=this;
				this.FileChange(file, res => {
					console.log(res.url);
					that.fileList.push({name:"1",url:res.url})
				});
			},
			FileChange(e, callback) {
				if (!e) return;
				let file = e.raw;
				if (!file) return;
				let param = new FormData();
				param.append('chunk', '0');
				param.append('chunks', '1');
				param.append('file', file, file.name);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data',
						'Authorization':sessionStorage.getItem("token"),
						'domain':'taobao.tianyalei.com'
					}
				};
				this.axios({
							method: "GET",
							headers: {
								"Authorization": sessionStorage.getItem("token"),
								"Content-Type": "multipart/form-data",
								"domain": "taobao.tianyalei.com"
							},
							url: "/qiniu/token"
						}).then(res => {
					let token = res.data.data;
					param.append('token', token);
					this.Uploading(param, config, callback);
					return;
				})
			},
			Uploading(param, config, callback) {
				this.axios.post('http://upload-z1.qiniup.com/', param, config).then(res => {
					let params = {
						message: 'ok',
						url: `http://qiniu.tianyalei.com/${res.data.key}`
					}
					if (callback) callback(params)
				}).catch(err => {
					console.log(err, 'pppp')
				})
			},
			handleRemove(file, fileList) {
				console.log(file);
				for(var i=0;i<this.fileList.length;i++){
						if(file.url==this.fileList[i].url){
							 this.fileList.splice(i,1)
						}
				}
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
			},
			send(){
				let that=this; 
				if(that.$route.query.id){
					 that.form.id=that.$route.query.id;
				}else{
					 delete that.form.id
				}
				let newary=[];
				for(var i=0;i<that.fileList.length;i++){
						newary.push(that.fileList[i].url)
				}
				that.form.images=newary.join(',');

				that.form.price=that.form.price*100;
				that.form.oldPrice=that.form.oldPrice*100;
				that.form.weight=that.form.weight*1000;
				this.axios.post('/goods', 
				this.qs.stringify(that.form), {
						headers: {
							'Authorization':sessionStorage.getItem("token"),
							'Content-Type':'application/x-www-form-urlencoded',
							'domain':'taobao.tianyalei.com'
						}
         })
					.then(function (response) {
						if(response.data.code==200){ 
								that.$message({
									message:'提交成功',
									type: 'success'
								});  
								that.$router.push({path:'/wares'})
							}
						})
			},
		}
	}

</script>
<style>
.ql-snow .ql-picker-label::before{
	  position: relative;
    top: -5px;
}
</style>